<template>
  <div class="w-[100%]">
    <div class="pb-15px">
      <el-input placeholder="搜索目录名称" v-model="filterText"></el-input>
    </div>
    <el-scrollbar height="55vh">
      <el-tree :data="treeList" :props="treeProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="treeRef">
        <template #default="{ data }">
          <div class="relative w-1/1">
            <div @click.self="changeDir(data.id)">{{ data.name }}</div>
            <div class="absolute right-[10px] top-0" v-if="!data.is_leaf">
              <el-dropdown trigger="click" size="small">
                <el-icon color="var(--el-color-primary)"><MoreFilled /></el-icon>
                <template #dropdown>
                  <el-dropdown-item v-for="p in tabs" :key="p.id" @click.stop="opera(data, p.id)">{{ p.name }}</el-dropdown-item>
                </template>
              </el-dropdown>
            </div>
            <div class="absolute right-0 top-0" v-if="data.is_leaf">
              <el-dropdown trigger="click" size="small">
                <el-icon color="var(--el-color-primary)"><MoreFilled /></el-icon>
                <template #dropdown>
                  <el-dropdown-item v-for="p in tabs1" :key="p.id" @click="opera(data, p.id)">{{ p.name }}</el-dropdown-item>
                </template>
              </el-dropdown>
            </div>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>
    <TreeDia ref="diaRef"></TreeDia>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive, ref, watch } from "vue";
import { dirList, addDir, editDir, deleteDir } from "@/api/modules/dir";
import { buildTree } from "../../utils/index";
import { DirTreeNode } from "../../interface/index";
import { MoreFilled } from "@element-plus/icons-vue";
import TreeDia from "./component/dia.vue";
import { ElTree } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";

// 过滤

const treeRef = ref<InstanceType<typeof ElTree> | null>();

const filterText = ref("");

watch(
  () => filterText.value,
  val => {
    treeRef.value?.filter(val);
  }
);
interface Tree {
  [key: string]: any;
}
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.name.includes(value);
};

const diaRef = ref<InstanceType<typeof TreeDia> | null>();
// 操作分类
const opera = async (row: any, type: number = 1) => {
  console.log(row, type);
  if (type === 1 || type === 2) {
    const params: any = {
      row: { name: type === 1 ? "" : row.name, pid: row.id },
      api: type === 1 ? addDir : editDir,
      refresh: initData
    };
    diaRef.value?.acceptParams(params);
  } else if (type === 3) {
    await useHandleData(deleteDir, { ids: [row.id] }, "删除所选内容");
    initData();
  }
};

// 分类标签
const tabs = reactive([
  { name: "添加分类", id: 1 },
  { name: "编辑分类", id: 2 },
  { name: "删除分类", id: 3 }
]);

const tabs1 = reactive([
  { name: "编辑分类", id: 2 },
  { name: "删除分类", id: 3 }
]);

const treeList = ref<DirTreeNode[]>([{ name: "全部", pid: 1, id: 1, is_leaf: false }]);

// 获取目录
const getList = async (params: any) => {
  try {
    const { data } = await dirList(params);
    return data;
  } catch (error) {}
};

// 初始化数据
const initData = async () => {
  const treeData = (await getList({ pid: 1 })) as DirTreeNode[];
  const tree = buildTree(treeData);
  treeList.value = [{ name: "全部", pid: 1, id: 1, is_leaf: false }];
  treeList.value.push(...tree);
};

// 属性值
const treeProps = {
  label: "name"
};

// 查看文件
const emits = defineEmits(["change"]);
// 当前的目录
const nowDirID = ref(1);
const changeDir = (id: number) => {
  if (nowDirID.value !== id) {
    nowDirID.value = id;
    emits("change", id);
  }
};

onBeforeMount(() => {
  initData();
});
</script>

<style></style>
